/* eslint-disable */
import { Comment, Avatar, Pagination } from 'antd';
import './CommentModule.scss'
import { useEffect, useState } from 'react'
import { getCommentList } from '../api/index'
import moment from 'moment'

function CommentModule(props) {
  const [totalCount, settotalCount] = useState(0)
  const [page, setpage] = useState(1)
  const [lastTime, setlastTime] = useState(0)
  const [commentList, setcommentList] = useState([])
  const [hotCommentList, sethotCommentList] = useState([
    {
      content: '',
      user: {
        nickname: '',
        avatarUrl: ''
      },
      time: 0
    }
  ])
  useEffect(() => {
    getCommentList(
      {
        id: props.id,
        type: props.type,
        pageSize: 15
      }
    ).then(({data})=>{
      if(data.code === 200) {
        settotalCount(data.data.totalCount)
        sethotCommentList(data.data.comments)
      }
    })
  }, [props])
  useEffect(() => {
    getCommentList(
      {
        id: props.id,
        type: props.type,
        pageNo: page,
        sortType: 3,
        cursor: lastTime
      }
    ).then(({data})=>{
      if (data.code === 200) {
        setcommentList(data.data.comments)
        setlastTime(data.data.comments[data.data.comments.length-1].time)
      }
    })
  }, [props, page])
  return (
    <div className="comment_box">
      <div className="titel_box">
        <div className="left">
          <h1>评论</h1><span>共{totalCount}条评论</span>
        </div>
      </div>
      {
        page === 1 && (
          <div>
            <SecondTitleBox>
              <div className="name">精彩评论</div>
            </SecondTitleBox>
            {
              hotCommentList.map((item, index) => {
                return (
                  <div  key={index}>
                    <ExampleComment itemData={item} />
                  </div>
                )
              })
            }
            <SecondTitleBox>
              <div className="name">最新评论（{totalCount}）</div>
            </SecondTitleBox>
          </div>
        )
      }
      {
        commentList.map((item, index) => {
          return(
            <ExampleComment key={index} itemData={item} />
          )
        })
      }
      <Pagination pageSize={20} current={page} total={totalCount} onChange={(page)=> setpage(page)} showSizeChanger={false} />
    </div>
  )
  function ExampleComment ({ children, itemData }) {
    return (
      <Comment
        actions={ [<span key="comment-nested-reply-to">{ moment(itemData.time).format("YYYY年MM月DD HH:mm:ss") }</span>] }
        author={ <a href='/'>{itemData.user.nickname}</a> }
        avatar={
          <Avatar
            src={itemData.user.avatarUrl}
            alt="Han Solo"
          />
        }
        content={
          <p>
            {itemData.content}
          </p>
        }
      >
        {children}
      </Comment>
    )
  }
  function SecondTitleBox ({children}) {
    return (
      <div className="second_title_box">
        {children}
      </div>
    )
  }
}
export default CommentModule